<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script src="/layui/layui.js"></script>
  <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<div class="layui-container" style="width: 400px; margin: 100px auto;">
  <div class="layui-card">
    <div class="layui-card-header">
      <h2 class="layui-card-title" style="text-align: center">用户注册</h2>
    </div>
    <div class="layui-card-body">
      <form class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">帐号</label>
          <div class="layui-input-block">
            <input type="text" name="username" required placeholder="输入您的用户名" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">昵称</label>
          <div class="layui-input-block">
            <input type="text" name="realname" required  placeholder="输入您的昵称" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">电子邮件</label>
          <div class="layui-input-block">
            <input type="email" name="email" required  placeholder="输入您的电子邮件" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">电话号码</label>
          <div class="layui-input-block">
            <input type="text" name="phone" required placeholder="输入您的电话号码" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="gender" value="0" title="男" checked>
            <input type="radio" name="gender" value="1" title="女">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="password" name="pwd" required lay-verify="required|password" placeholder="输入您的密码" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-block">
            <input type="password" name="confirmPassword" required lay-verify="required|password|confirmPassword" placeholder="确认您的密码" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">班级</label>
          <div class="layui-input-block">
            <input type="text" name="cid" required placeholder="确认您的班级" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">注册</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="/js/jquery.js"></script>
<script>
  layui.use('form', function(){
    var form = layui.form;

    form.verify({
      pwd: function(value){
        if(value.length < 6){
          return '密码太短了！';
        }
      },
      confirmPassword: function(value, item){
        if(value!= $('input[name="pwd"]').val()){
          return '两次输入的密码不一致！';
        }
      }
    });


    form.on('submit(register)', function(data){
      console.log(data.field);
        //TODO 监听提交
        //TODO 发起Ajax请求
        $.post("/register",data.field,function (result){
          if(result.code==200){
            layer.msg('注册成功，跳转中...');
            setTimeout(function () {
              window.location.href="/login";
            }, 2000);
          }
          else{
            layer.msg(result.msg);
          }
        })
      return false;
    });
  });
</script>
</body>
</html>